<?php 
include 'ini.php';
include 'header.php';
if (isLoggedIn())
{
?>
<div class="col-2 well">
<ul class="nav nav-pills nav-stacked" style="max-width: 300px;">
      <li class=""><a href="#">Home</a></li>
      <li class="active"><a href="score.php">Score a test</a></li>
</ul>    
</div>


<?php
}
?>
<script type="text/javascript">
    
var PREVIOUS_ANSWER_FOCUS;
var CURRENT_ANSWER_FOCUS;
var questionArray = {};
window.onkeydown = runScript;

window.onload=function()
{
    
    for(var i = 1; i < 76; i++)
    {
        questionArray[i] = "1." + i;
    }
    
    for(var i = 1; i < 61; i++)
    {
        questionArray[ i + 75] = "2."+i;
    }
    
    for(var i = 1; i < 41; i++)
    {
        questionArray[ i + 75 + 60] = "3." + i;
    }
    
     for(var i = 1; i < 41; i++)
    {
        questionArray[ i + 75 + 60 + 40] = "4." + i;
    }
    
    setAnswersFromCookie();

CURRENT_ANSWER_FOCUS = document.getElementById("1.1");
CURRENT_ANSWER_FOCUS.className += " current_question_focus";

$(".answerBlock").click(function()
{
    if(this == CURRENT_ANSWER_FOCUS)
    {
        return;
    }
        $(this).addClass('current_question_focus');
        $(CURRENT_ANSWER_FOCUS).attr('class', 'answerBlock');
        
        var scrollIndex = $(this).offset();
        $("html, body").animate({scrollTop:(scrollIndex.top)},5,"linear");
        CURRENT_ANSWER_FOCUS = this;
});
}

function setAnswersFromCookie()
{
    var cookie = readCookie("t_attempt");
    
    if(cookie == null)
    {
        return;
    }
    
    var arr = cookie.split(';');

    for (var i = 0; i < arr.length; i++)
    {
        var ansArray = arr[i].split('==');

        var questionNumber = ansArray[0];
        var questionAnswer = ansArray[1];

        if (questionAnswer != 'undefined' && questionNumber != 'undefined' 
                && questionNumber.length > 0 &&  questionAnswer.length > 0)
        {
            var answerBlockDiv = document.getElementById(questionNumber);
            $(answerBlockDiv).data('selectedanswer', questionAnswer);   

            var imageDiv = document.getElementById("img_" + questionNumber + questionAnswer);
            imageDiv.src = "images/answerBubble/checked.jpg";

            var hiddenAnswerField = document.getElementById("answer_"+ questionNumber);
            $(hiddenAnswerField).val(questionAnswer);
        }
    }
}
        
function setCurrentFocus(div)
{
    if ( CURRENT_ANSWER_FOCUS == div)
    {
        return;
    }
       
    $(div).addClass('current_question_focus');
    $(CURRENT_ANSWER_FOCUS).attr('class', 'answerBlock');

     var scrollIndex = $(div).offset();
    $("html, body").animate({scrollTop:(scrollIndex.top)},5,"linear");

    CURRENT_ANSWER_FOCUS = div;
}
        
function checkBubble(div)
{
    var selectedLetter = $(div).data('answerletter');
    
   $('img', $(div.parentNode)).each(function () 
   {
       if(this.src.indexOf("checked") > -1)
       {
           this.src = "images/answerBubble/" + $(this).data('answerletter') + ".jpg";
       }
    });
    
    div.children[0].src = "images/answerBubble/checked.jpg";
    
   $(div.parentNode).data('selectedanswer', selectedLetter);
   
   $("#answer_" + $(div.parentNode).attr('id')).val(selectedLetter);
   var hiddenAnswerField = document.getElementById("answer_"+$(div.parentNode).attr('id'));
   $(hiddenAnswerField).val(selectedLetter);
   
    var scrollIndex = $(div).offset();
    $("html, body").animate({scrollTop:(scrollIndex.top)},100,"linear");
    setAnswerCookie();
}

function readCookie(name) {
    var nameEQ = escape(name) + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0) return unescape(c.substring(nameEQ.length, c.length));
    }
    return null;
}

function createCookie(name, value, days) 
{
    var expires;

    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    } else {
        expires = "";
    }
    document.cookie = escape(name) + "=" + escape(value) + expires + "; path=/";
}

function setAnswerCookie()
{
    var cookieString = "";
    $('.answerBlock').each(function () 
    {
       cookieString += this.id + "==" + $(this).data('selectedanswer') + ";";
    }); 
    
   createCookie("t_attempt", cookieString, 1);
}

function markBubble(letter)
{
    $('img', $(CURRENT_ANSWER_FOCUS)).each(function () 
   {
       if(this.src.indexOf("checked") > -1)
       {
          this.src = "images/answerBubble/" + $(this).data('answerletter') + ".jpg";
       }
       
       if ($(this).data('answerletter') == letter || $(this).data('answerletter') == letter )
       {
           this.src = "images/answerBubble/checked.jpg";
       }
    });
    setAnswerCookie();
    var hiddenAnswerField = document.getElementById("answer_"+ CURRENT_ANSWER_FOCUS.id);
    $(hiddenAnswerField).val(letter);
}

function runScript(e) 
{
    var answerChoices =  $(CURRENT_ANSWER_FOCUS).data('availableletters');
    
    switch(e.keyCode)
    {
        case 65: // A
            {
               if (answerChoices.indexOf("A") > -1)
                {
                    $(CURRENT_ANSWER_FOCUS).data('selectedanswer', "A");
                    markBubble("A");
                    var curQuestionOverall = getCurrentQuestionBigNumber();
                    var nextQuestion = document.getElementById(questionArray[curQuestionOverall+ 1]);
                    setCurrentFocus(nextQuestion);
                }
            }
            break;
        case 66: //B
            {
               if (answerChoices.indexOf("B") > -1)
                {
                    $(CURRENT_ANSWER_FOCUS).data('selectedanswer', "B");
                    markBubble("B");
                    var curQuestionOverall = getCurrentQuestionBigNumber();
                    var nextQuestion = document.getElementById(questionArray[curQuestionOverall+ 1]);
                    setCurrentFocus(nextQuestion);
                }
            }
            break;
        case 67: //C
         {
               if (answerChoices.indexOf("C") > -1)
                {
                    $(CURRENT_ANSWER_FOCUS).data('selectedanswer', "C");
                    markBubble("C");
                    var curQuestionOverall = getCurrentQuestionBigNumber();
                    var nextQuestion = document.getElementById(questionArray[curQuestionOverall+ 1]);
                    setCurrentFocus(nextQuestion);
                }
            }
            break;
        case 68: // D
         {
               if (answerChoices.indexOf("D") > -1)
                {
                    $(CURRENT_ANSWER_FOCUS).data('selectedanswer', "D");
                    markBubble("D");
                    var curQuestionOverall = getCurrentQuestionBigNumber();
                    var nextQuestion = document.getElementById(questionArray[curQuestionOverall+ 1]);
                    setCurrentFocus(nextQuestion);
                }
            }
            break;
        case 69: //E
            {
                if (answerChoices.indexOf("E") > -1)
                {
                    $(CURRENT_ANSWER_FOCUS).data('selectedanswer', "E");
                    markBubble("E");
                    var curQuestionOverall = getCurrentQuestionBigNumber();
                    var nextQuestion = document.getElementById(questionArray[curQuestionOverall+ 1]);
                    setCurrentFocus(nextQuestion);
                }
            }
            break;
        case 70: //F
            {
                if (answerChoices.indexOf("F") > -1)
                {
                    $(CURRENT_ANSWER_FOCUS).data('selectedanswer', "F");
                    markBubble("F");
                    var curQuestionOverall = getCurrentQuestionBigNumber();
                    var nextQuestion = document.getElementById(questionArray[curQuestionOverall+ 1]);
                    setCurrentFocus(nextQuestion);
                }
            }
            break;
        case 71: //G
            {
                if (answerChoices.indexOf("G") > -1)
                {
                    $(CURRENT_ANSWER_FOCUS).data('selectedanswer', "G");
                    markBubble("G");
                    var curQuestionOverall = getCurrentQuestionBigNumber();
                    var nextQuestion = document.getElementById(questionArray[curQuestionOverall+ 1]);
                    setCurrentFocus(nextQuestion);
                }
            }
            break;
        case 72: //H
            {
                if (answerChoices.indexOf("H") > -1)
                {
                    $(CURRENT_ANSWER_FOCUS).data('selectedanswer', "H");
                    markBubble("H");
                    var curQuestionOverall = getCurrentQuestionBigNumber();
                    var nextQuestion = document.getElementById(questionArray[curQuestionOverall+ 1]);
                    setCurrentFocus(nextQuestion);
                }
            }
            break;
        case 74: //J
            {
                if (answerChoices.indexOf("J") > -1)
                {
                    $(CURRENT_ANSWER_FOCUS).data('selectedanswer', "J");
                    markBubble("J");
                    var curQuestionOverall = getCurrentQuestionBigNumber();
                    var nextQuestion = document.getElementById(questionArray[curQuestionOverall+ 1]);
                    setCurrentFocus(nextQuestion);
                }
            }
            break;
        case 75:// K
            {
                if (answerChoices.indexOf("K") > -1)
                {
                    $(CURRENT_ANSWER_FOCUS).data('selectedanswer', "K");
                    markBubble("K");
                    var curQuestionOverall = getCurrentQuestionBigNumber();
                    var nextQuestion = document.getElementById(questionArray[curQuestionOverall+ 1]);
                    setCurrentFocus(nextQuestion);
                }
            }
            break;
            break;
            
    }
    
}

function getCurrentQuestionBigNumber()
{
    for(var i = 1; i < 216; i++)
    {
        if (questionArray[i] == CURRENT_ANSWER_FOCUS.id)
        {
            return i;
      }
    }
}

function submitTest()
{
    var con =confirm("Are you sure you're ready to submit the test?");
    
    if (!con)
    {
        return false;
    }
    
    document.getElementById("loading_text").innerHTML = "Scoring...";
    document.getElementById("loader").style.display = "block";
   
    
}
</script>

<div class="col-5">
<form method="post" action="p_score.php">
    
    
    <div class="form-inline">
        <div class="form-group">
        
            <label class="sr-only" for="exampleInputEmail2" style="margin-right: 10px;">Test ID:</label>
            <select style="padding: 5px; width: 50px;" name="test_id">
                <option value="1"> 1 </option>
            </select>
        </div>
    </div>


<!-- ENGLISH SECTION ------------------>
<div id="english" style="width: 400px; margin: auto;">
    <h3>English</h3>
<?php

$aAnswers = ["images/answerBubble/A.jpg", "images/answerBubble/B.jpg","images/answerBubble/C.jpg","images/answerBubble/D.jpg"];
$aAnswersLetters = ["A", "B", "C", "D"];

$fAnswers = ["images/answerBubble/F.jpg", "images/answerBubble/G.jpg","images/answerBubble/H.jpg","images/answerBubble/J.jpg"];
$fAnswersLetters = ["F", "G", "H", "J"];

for( $i = 1; $i < 76; $i++) // 1 - 75
{
    if ($i % 2 == 1)
    {
        $curAnswerChoices = $aAnswers;
        $curAnswerLetters = $aAnswersLetters;
    }
    else 
    {
        $curAnswerChoices = $fAnswers;
        $curAnswerLetters = $fAnswersLetters;
    }
    
    $letterString = "";
    foreach ($curAnswerLetters as $letter) 
    {
        $letterString .= $letter;
    }
?>


<div class="answerBlock" data-selectedanswer="" id="1.<?php echo $i;?>" data-availableletters="<?php echo $letterString;?>">
    <input type="hidden" id="answer_1.<?php echo $i;?>" name="answer_1.<?php echo $i;?>"/>
    <div class="answerNumber"> 
        <?php echo $i.".";?> 
    </div>
    <?php for($j = 0; $j < 4; $j++){  ?>
    
       <div class="answerBubble" onclick="checkBubble(this);" data-answerletter="<?php echo $curAnswerLetters[$j];?>">
       <image id="img_1.<?php echo $i.$curAnswerLetters[$j];?>" src=" <?php echo $curAnswerChoices[$j];?>" 
              data-answerletter="<?php echo $curAnswerLetters[$j];?>"/>
        </div>
        
    <?php }    ?>
</div>
<div class="clearFix"></div>

<?php } ?>
</div>





<!-- MATH SECTION ----------------->
<div id="math" style="width: 400px; margin: auto;">
    <h3>Math</h3>
<?php

$aAnswers = ["images/answerBubble/A.jpg", "images/answerBubble/B.jpg","images/answerBubble/C.jpg","images/answerBubble/D.jpg", "images/answerBubble/E.jpg"];
$aAnswersLetters = ["A", "B", "C", "D", "E"];

$fAnswers = ["images/answerBubble/F.jpg", "images/answerBubble/G.jpg","images/answerBubble/H.jpg","images/answerBubble/J.jpg", "images/answerBubble/K.jpg"];
$fAnswersLetters = ["F", "G", "H", "J", "K"];

for( $i = 1; $i < 61; $i++) // 1 - 60
{
    if ($i % 2 == 1)
    {
        $curAnswerChoices = $aAnswers;
        $curAnswerLetters = $aAnswersLetters;
    }
    else 
    {
        $curAnswerChoices = $fAnswers;
        $curAnswerLetters = $fAnswersLetters;
    }
    
     $letterString = "";
    foreach ($curAnswerLetters as $letter) 
    {
        $letterString .= $letter;
    }
?>


<div class="answerBlock" data-selectedanswer="" id="2.<?php echo $i;?>" data-availableletters="<?php echo $letterString;?>">
    <input type="hidden" id="answer_2.<?php echo $i;?>" name="answer_2.<?php echo $i;?>"/>
    <div class="answerNumber"> 
        <?php echo $i.".";?> 
    </div>
    <?php for($j = 0; $j < 5; $j++){  ?>
    
       <div class="answerBubble" 
            onclick="checkBubble(this);" 
            data-answerletter="<?php echo $curAnswerLetters[$j];?>">
       <image id="img_2.<?php echo $i.$curAnswerLetters[$j];?>" src=" <?php echo $curAnswerChoices[$j];?>" 
              data-answerletter="<?php echo $curAnswerLetters[$j];?>"/>
        </div>
        
    <?php }    ?>
</div>
<div class="clearFix"></div>

<?php } ?>
</div>





<!-- READING SECTION ----------------->
<div id="reading" style="width: 400px; margin: auto;">
    <h3>Reading</h3>
<?php

$aAnswers = ["images/answerBubble/A.jpg", "images/answerBubble/B.jpg","images/answerBubble/C.jpg","images/answerBubble/D.jpg"];
$aAnswersLetters = ["A", "B", "C", "D"];

$fAnswers = ["images/answerBubble/F.jpg", "images/answerBubble/G.jpg","images/answerBubble/H.jpg","images/answerBubble/J.jpg"];
$fAnswersLetters = ["F", "G", "H", "J"];

for( $i = 1; $i < 41; $i++) // 1 - 40
{
    if ($i % 2 == 1)
    {
        $curAnswerChoices = $aAnswers;
        $curAnswerLetters = $aAnswersLetters;
    }
    else 
    {
        $curAnswerChoices = $fAnswers;
        $curAnswerLetters = $fAnswersLetters;
    }
    
     $letterString = "";
    foreach ($curAnswerLetters as $letter) 
    {
        $letterString .= $letter;
    }
?>


<div class="answerBlock" data-selectedanswer="" id="3.<?php echo $i;?>" data-availableletters="<?php echo $letterString;?>">
        <input type="hidden" id="answer_3.<?php echo $i;?>" name="answer_3.<?php echo $i;?>"/>
    <div class="answerNumber"> 
        <?php echo $i.".";?> 
    </div>
    <?php for($j = 0; $j < 4; $j++){  ?>
    
       <div class="answerBubble" 
            onclick="checkBubble(this);" 
            data-answerletter="<?php echo $curAnswerLetters[$j];?>">
       <image id="img_3.<?php echo $i.$curAnswerLetters[$j];?>" src=" <?php echo $curAnswerChoices[$j];?>" 
              data-answerletter="<?php echo $curAnswerLetters[$j];?>"/>
        </div>
        
    <?php }    ?>
</div>
<div class="clearFix"></div>

<?php } ?>
</div>




<!-- SCIENCE SECTION ----------------->
<div id="science" style="width: 400px; margin: auto;">
    <h3>Science</h3>
<?php

$aAnswers = ["images/answerBubble/A.jpg", "images/answerBubble/B.jpg","images/answerBubble/C.jpg","images/answerBubble/D.jpg"];
$aAnswersLetters = ["A", "B", "C", "D"];

$fAnswers = ["images/answerBubble/F.jpg", "images/answerBubble/G.jpg","images/answerBubble/H.jpg","images/answerBubble/J.jpg"];
$fAnswersLetters = ["F", "G", "H", "J"];

for( $i = 1; $i < 41; $i++) // 1 - 40
{
    if ($i % 2 == 1)
    {
        $curAnswerChoices = $aAnswers;
        $curAnswerLetters = $aAnswersLetters;
    }
    else 
    {
        $curAnswerChoices = $fAnswers;
        $curAnswerLetters = $fAnswersLetters;
    }
    
     $letterString = "";
    foreach ($curAnswerLetters as $letter) 
    {
        $letterString .= $letter;
    }
?>


<div class="answerBlock" data-selectedanswer="" id="4.<?php echo $i;?>" data-availableletters="<?php echo $letterString;?>">
        <input type="hidden" id="answer_4.<?php echo $i;?>" name="answer_4.<?php echo $i;?>"/>
    <div class="answerNumber"> 
        <?php echo $i.".";?> 
    </div>
    <?php for($j = 0; $j < 4; $j++){  ?>
    
       <div class="answerBubble" 
            onclick="checkBubble(this);" 
            data-answerletter="<?php echo $curAnswerLetters[$j];?>">
       <image id="img_4.<?php echo $i.$curAnswerLetters[$j];?>" src=" <?php echo $curAnswerChoices[$j];?>" 
              data-answerletter="<?php echo $curAnswerLetters[$j];?>"/>
        </div>
        
    <?php }    ?>
</div>
<div class="clearFix"></div>

<?php } ?>
</div>

<button class="btn btn-primary" type="submit" onclick="return submitTest();" id="test_submit_button"><div id="loading_text" style="float: left">Submit</div><img id="loader" style="display: none; float: left; margin-left: 10px;" src="images/spinner1.GIF" /></button>
</form>
    </div>